@extends('layouts.appManager')
@section('style')
    <style>
        p{
            margin-bottom: 0 !important;
            color: #a8adb4;
        }
    </style>
@endsection
@section('content')
<div class="container py-5">
{{--    {{dd($server->id)}}--}}
    <input type="hidden" id="serverId" value="{{$server->id}}">


    <ul class="list-group list-group-flush">
        <li v-for="(gmComm,i) in gmCommands" :key="i" class="list-group-item" >
            <el-link type="primary" @click="curCommand=gmComm;dialogVisible=true;">@{{gmComm.title?gmComm.title:gmComm.command}}</el-link>
            <p><em>@{{gmComm.command}}</em></p>
        </li>
    </ul>


    <el-dialog
        v-if="curCommand"
        :visible.sync="dialogVisible"
        :title="curCommand.title?curCommand.title:curCommand.command"
        :close-on-click-modal="false"
        width="50%">
        <el-input placeholder="请输入命令" v-model="command" class="input-with-select">
            <el-button slot="append" icon="el-icon-s-tools" type="primary" @click="run">执行命令</el-button>
        </el-input>
        <br><br>
        <ul>
            <li v-for="(arg,i) in curCommand.args" :key="i">@{{ arg.k+"："+arg.v }}</li>
        </ul>
        <br>
        <div>
            <div>执行结果：</div>
            <el-input
                type="textarea"
                :rows="5"
                placeholder=""
                v-model="res">
            </el-input>
        </div>
        <div v-if="err" class="mt-3">
            <div>错误信息：</div>
            <el-input
                type="textarea"
                :rows="3"
                placeholder=""
                v-model="err">
            </el-input>
        </div>



        <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">关闭</el-button>
      </span>
    </el-dialog>

</div>

@endsection

@section('script')
    <script src="{{asset('js/config/gmCommands2.js')}}?v=1"></script>
    <script>
        var app = new Vue({
            el: '#app',
            data: {
                dialogVisible:false,
                serverId:$('#serverId').val(),
                command: '',
                err:'',
                res:'',
                gmCommands:gmCommands,
                curCommand:null,
            },
            mounted() {

            },
            watch:{
                curCommand(){
                    this.command=this.curCommand.command;
                    this.err='';
                    this.res='';
                }
            },
            methods: {
                run(){
                    var t=this;
                    if (t.command.trim()===''){
                        t.$message({ type: 'error',message: '请输入命令'});
                        return;
                    }
                    if (t.command.indexOf("$") !== -1 ||
                        t.command.indexOf("#") !== -1 ||
                        t.command.indexOf("[") !== -1 ||
                        t.command.indexOf("]") !== -1 ){
                        t.$message({ type: 'error',message: '请替换命令中的参数'});
                        return;
                    }

                    post("/manager/server/config/runGMCommand",{id:t.serverId,command:t.command},res=>{
                        if (res.data===1){
                            t.$message({
                                type: 'success',
                                message: '执行成功'
                            });
                        }else{
                            t.$message({
                                type: 'error',
                                message: '执行失败'
                            });
                        }
                        t.err=res.return.err;
                        t.res=res.return.res;
                        console.log(res.data);
                    },t);
                }
            }
        })
    </script>
@endsection
